<template>
  <div>
    <a-modal
      :visible="showModal"
      :maskClosable="false"
      :keyboard="!formModal.loading"
      :closable="!formModal.loading"
      :title="modalTitle"
      width="760px"
      :destroyOnClose="true"
      @cancel="cancelSub"
      centered
    >
    <!-- :destroyOnClose="true" 如果希望每次打开都是新内容，设置 destroyOnClose-->
      <a-form-model class="flex-model-form"
        ref="addForm"
        :model="formModal.form"
        :rules="formModal.rules"
      >
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="会议室名称" prop="name">
              <a-input :disabled="eidtabled" placeholder="请输入，不超过20字" :allowClear="true" v-model="formModal.form.name" :maxLength="20" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <!-- <a-form-model-item label="开放预约时间" prop="time">
              <a-time-picker :disabled="eidtabled" v-model="formModal.form.time" format="HH:mm" />
            </a-form-model-item> -->
            <a-form-model-item label="容纳人数" prop="capacity">
              <a-input-number placeholder="请输入容纳人数"
                :formatter="capacityFormat"
                :disabled="eidtabled"
                :precision="0"
                v-model="formModal.form.capacity" :min="1" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="会议室设备" prop="equipmentTypeId">
              <a-select
                show-search
                :disabled="eidtabled"
                v-model="formModal.form.equipmentTypeId"
                option-filter-prop="children"
                mode="multiple"
                style="width: 100%;"
                placeholder="请选择会议室设备"
                :filterOption="filterOption"
              >
                <!-- :filter-option="filterOption" -->
                <a-select-option v-for="(item, index) in equipmentType" style="text-align: left;" :key="item.id" :value="item.id">
                  {{ item.name }}
                </a-select-option>
                <!-- <a-select-option style="text-align: left;" value="xsq">
                  显示器
                </a-select-option>
                <a-select-option style="text-align: left;" value="12">
                  121221
                </a-select-option> -->
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="状态" prop="enable">
              <a-radio-group name="radioGroup"
                :disabled="eidtabled"
                v-model="formModal.form.enable"
              >
                  <a-radio :value="true">可用</a-radio>
                  <a-radio :value="false">不可用</a-radio>
                </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="会议室图片">
             <upload-list
                :disabled="eidtabled"
                uploadType="image"
                :businessCode="'OF01'"
                :editModel="2"
                :count="1"
                @fileArrysData="imgChanged"
                :uploadArrys.sync="formModal.picture"
              ></upload-list>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>

      <template slot="footer">
        <a-button :disabled="formModal.loading" key="back" @click="cancelSub">
          取消
        </a-button>
        <a-button v-if="!eidtabled" key="submit" type="primary" :loading="formModal.loading" @click="submitForm">
          确认
        </a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>

import UploadList from '@/components/UploadList'
import { getLabelTypes, meetingRoomAdd, meetingRoomUpdate } from '@/api/office/anualConference/index'
export default {
    name: 'AddConferenceRoom',
    props: {
      visible: {
        type: Boolean,
        default() {
            return true
        }
      },
      modalType: {
        type: String,
        default() {
          return 'add'
        }
      },
      formData: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    components: {
      UploadList
    },
    data() {
        return {
          formItemData: {
            equipmentType: []
          },
          formModal: {
            loading: false,
            picture: [],
            form: {
              name: '',
              capacity: '',
              equipmentTypeId: [],
              enable: true,
              meetingRoomFileId: ''
            },
            rules: {
              name: [
                { required: true, message: '请输入会议室名称，不超过20字', trigger: 'blur' },
              ],
              time: [
                { required: true, message: '请选择预约时间', trigger: 'change' },
              ],
              capacity: [
                { required: true, message: '请输入容纳人数', trigger: 'change' },
              ],
              equipmentTypeId: [
                { required: true, message: '请选择设备', trigger: 'blur' },
              ]
            },
          },
        }
    },
    watch: {
      // modalType: {
      //   handler(nv, old) {
      //       console.log(nv)
      //   }
      // }
      visible: {
        handler(nv, old) {
          if (!nv) return;
          const form = {
            ...this.formData
          }
          this.formModal.picture = form.fileInfoVO ? [form.fileInfoVO] : [];
          if (this.modalType !== 'add') {
            form.equipmentTypeId = form.equipmentType.map((item, idx) => {
              return item.id
            })
            form.meetingRoomFileId = form.fileInfoVO ? form.fileInfoVO.commonId : ''
            delete form.equipmentType;
            delete form.fileInfoVO;
            this.formModal.form = {
              ...form
            };
          } else {
            this.formModal.form = {
              name: '',
              capacity: '',
              equipmentTypeId: [],
              enable: true,
              meetingRoomFileId: ''
            }
          }
        }
      },
      'formModal.picture': {
        handler(nv, old) {
          this.imgChanged(nv)
        }
      }
    },
    computed: {
      showModal() {
        return this.visible
      },
      eidtabled() {
        return this.modalType === 'look'
      },
      modalTitle() {
        const title = {
          'look': '查看会议室',
          'edit': '编辑会议室',
          'add': '新增会议室'
        }
        return title[this.modalType];
      },
      equipmentType() {
        let res = this.formItemData.equipmentType
        return res
      }
    },
    created() {
      this.getEquipmentType();
    },
    mounted() {
    },
    methods: {
      capacityFormat(v) {
        return (v && !isNaN(Number(v))) ? Number(v).toFixed(0) : ''
      },
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      getEquipmentType() {
        let param = {
          "pageNo": 0,
          "pageSize": 100,
          "query": {
            "type": 5
          }
        }
        getLabelTypes(param).then((res) => {
          if (res && res.code == 200) {
            this.formItemData.equipmentType = res.data || [];
          }
        })
      },
      imgChanged(res) {
        const commonId = this.formModal.picture.length > 0 ? this.formModal.picture[0].commonId : ''
        this.formModal.form.meetingRoomFileId = commonId
      },
      cancelSub(reset) {
        this.$refs.addForm.resetFields();
        this.picture = [];
        let re = reset == 'reset' ? { reset } : null
        this.$emit('cancelSub', re)
      },
      onSubmit(param) {
        param.enable = param.enable == '1' ? true : false
        if (this.modalType == 'add') {
          this.addRoom(param)
        } else if (this.modalType == 'edit'){
          this.editRoom(param)
        }
      },
      addRoom(param) {
        this.formModal.loading = true;
        meetingRoomAdd(param).then((res) => {
          this.formModal.loading = false
          if (res && res.code == 200) {
            this.$message.success('会议室新增成功！')
            this.cancelSub('reset')
          } else {
            this.$message.error('会议室新增失败！')
          }
        }).catch(() => {
          this.formModal.loading = false
        })
      },
      editRoom(param) {
        this.formModal.loading = true;
        meetingRoomUpdate(param).then((res) => {
          this.formModal.loading = false
          if (res && res.data && res.data.code == 200) {
            this.$message.success('会议室修改成功！')
            this.cancelSub('reset')
          } else {
            this.$message.error('会议室修改失败！')
          }
        }).catch(() => {
          this.formModal.loading = false
        })
      },
      submitForm() {
        // const formData = [...this.formModal.form];
        // formData.equipmentTypeId = formData.equipmentTypeId.toString();
        console.log(this.formModal.form)
        this.$refs.addForm.validate(valid => {
          if (valid) {
            console.log('submit!');
            this.onSubmit(this.formModal.form)
          } else {
            this.$message.warning("请填写完所有必填项信息")
            console.log('error submit!!');
            return false;
          }
        });
      }
    },
}
</script>
<style lang="less" scoped>
  .upload-list .ant-upload-list {
    // display: contents;
  }
  // .upload-list .ant-upload-list-item-image::after {
  //   content: '';
  //   display: inline-block;
  //   position: absolute;
  //   z-index: 2;
  //   top: 0;
  //   left: 0;
  //   width: 100%;
  //   height: 100%;
  //   background-image: url("../../../../../assets/noPic.png");
  //   background-size: cover;
  //   background-color: #fff;
  // }
</style>
